<template>
  <div style="width: 100%">
    <el-table
      :data="tableDatas"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column width="180" label="0" v-if="showHeaders[0]">
        <template #default="{ row }">
          {{ row.specKeyParamList[0].specValue.value }}
        </template>
        <template v-slot:header>
          {{ showHeaders[0] }}
        </template>
      </el-table-column>
      <el-table-column width="180" label="1" v-if="showHeaders[1]">
        <template #default="{ row }">
          {{ row.specKeyParamList[1].specValue.value }}
        </template>
        <template v-slot:header>
          {{ showHeaders[1] }}
        </template>
      </el-table-column>
      <el-table-column width="180" label="2" v-if="showHeaders[2]">
        <template #default="{ row }">
          {{ row.specKeyParamList[2].specValue.value }}
        </template>
        <template v-slot:header>
          {{ showHeaders[2] }}
        </template>
      </el-table-column>

      <el-table-column width="180">
        <template #default="{ row, $index }">
          <div :class="{ 'medicina-err-cell': !row.price }">
            <el-input
              v-model="row.price"
              @change="checkNumber2($event, $index, 'price')"
            ></el-input>
          </div>
        </template>
        <template v-slot:header>
          价格(元)
          <span style="color: #ff6464">*</span>
        </template>
      </el-table-column>

      <el-table-column>
        <template #default="{ row, $index }">
          <div :class="{ 'medicina-err-cell': !row.num }">
            <el-input
              v-model="row.num"
              @change="checkNumber($event, $index)"
            ></el-input>
          </div>
        </template>
        <template v-slot:header>
          库存
          <span style="color: #ff6464">*</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="Amount 3">
        <template #default="{ row }">
          <el-input v-model="row.num"></el-input>
        </template>
        <template v-slot:header>重量</template>
      </el-table-column> -->
      <el-table-column>
        <template #default="{ row, $index }">
          <div :class="{ 'medicina-err-cell': !row.costPrice }">
            <el-input
              v-model="row.costPrice"
              @change="checkNumber2($event, $index, 'costPrice')"
            ></el-input>
          </div>
        </template>
        <template v-slot:header>
          成本价
          <span style="color: #ff6464">*</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="{ row }">
          <el-input v-model="row.specCode"></el-input>
        </template>
        <template v-slot:header>规格编码</template>
      </el-table-column>

      <el-table-column>
        <template #default="{ row }">
          <el-input v-model="row.specBarCode"></el-input>
        </template>
        <template v-slot:header>规格条码</template>
      </el-table-column>

      <!-- <el-table-column label="Amount 3">
        <el-input v-model="getTmpString"></el-input>
        <template v-slot:header>销量</template>
      </el-table-column> -->
      <!-- <el-table-column width="180" label="0">
        <template #default="{ row, column, $index }">
          {{ filters(row, column, $index) }}
        </template>
        <template v-slot:header>我是标题</template>
      </el-table-column>
      <el-table-column width="180" label="1">
        <template #default="{ row, column, $index }">
          {{ filters(row, column, $index) }}
        </template>
        <template v-slot:header>我是标题</template>
      </el-table-column>
      <el-table-column width="180" label="2">
        <template #default="{ row, column, $index }">
          {{ filters(row, column, $index) }}
        </template>
        <template v-slot:header>我是标题</template>
      </el-table-column>

      <el-table-column label="Amount 3">
        <template #default="{ row, column, $index }">
          <el-input
            v-model="row.value"
            @change="changeText($event, row, column, $index)"
          ></el-input>
        </template>
        <template v-slot:header>价格(元)</template>
      </el-table-column>

      <el-table-column label="Amount 3">
        <el-input></el-input>
        <template v-slot:header>库存</template>
      </el-table-column>

      <el-table-column label="Amount 3">
        <el-input></el-input>
        <template v-slot:header>重量</template>
      </el-table-column>

      <el-table-column label="Amount 3">
        <el-input></el-input>
        <template v-slot:header>规格编码</template>
      </el-table-column>

      <el-table-column label="Amount 3">
        <el-input></el-input>
        <template v-slot:header>规格条码</template>
      </el-table-column>

      <el-table-column label="Amount 3">
        <el-input></el-input>
        <template v-slot:header>成本价</template>
      </el-table-column>

      <el-table-column label="Amount 3">
        <el-input v-model="getTmpString"></el-input>
        <template v-slot:header>销量</template>
      </el-table-column> -->
    </el-table>
  </div>
</template>
<script lang="ts" setup>
  import type {
    User,
    SpanMethodProps,
  } from '@/views/shops/components/hooks/shopEditHooks'
  import { computed, ref } from '@vue/reactivity'
  import useEditShop from '@/views/shops/components/hooks/useEditShop'
  import { specInfoParamList } from '@/types/shop'
  import common from '@/utils/common'
  import { values } from 'lodash'

  const showHeaders = computed(() => {
    if (props.tableDatas && props.tableDatas.length > 0) {
      const { specKeyParamList } = props.tableDatas[0] as specInfoParamList
      return specKeyParamList.map((item: any) => {
        return item.text
      })
    }
    return [false, false, false]
  })
  const props = defineProps({
    tableDatas: {
      type: Array,
      dafult() {
        return []
      },
    },
    spanMergeDic: {
      type: Object,
      dafult() {
        return {}
      },
    },
    sectionData: {
      type: Array,
      dafult() {
        return []
      },
    },
  })
  const arraySpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
  }: SpanMethodProps) => {
    const tmp = `${rowIndex}-${columnIndex}`
    // if (rowIndex === 1 && columnIndex === 0) {
    //   return [0, 0]
    // }
    // if (rowIndex === 0 && columnIndex === 0) {
    //   return [2, 1]
    // }
    // @ts-ignore：无法被执行的代码的错误
    const data = props.spanMergeDic[tmp]
    if (data) {
      return data
    }
  }

  // 获得请求头
  // function filtersHeader(column: any, index: number) {
  //   if (props.tableDatas && props.tableDatas.length > 0) {
  //     const item: any = props.tableDatas[0]
  //     const { text } = item.specKeyParamList[index]
  //     return text
  //   }
  // }

  // const datas = [
  //   {
  //     name: '规格1',
  //     value: ['规格1值1', '规格1值2', '规格1值3', '规格1值4', '规格1值5'],
  //   },
  //   {
  //     name: '规格2',
  //     value: ['规格2值1', '规格2值2', '规格2值3', '规格2值4', '规格2值5'],
  //   },
  //   {
  //     name: '规格3',
  //     value: ['规格3值1', '规格3值2', '规格3值3', '规格3值4', '规格3值5'],
  //   },
  // ]

  // const tmpString = ref('121221')
  // const getTmpString = computed(() => () => {
  //   return tmpString.value
  // })

  function changeText($event: any, row: any, column: any, $index: number) {
    // console.log('changeText $event =' + $event)
    // console.log('changeText row =' + JSON.stringify(row))
    // console.log('changeText column =' + JSON.stringify(column))
    // console.log('changeText $index =' + $index)
  }

  function checkNumber2(value: any, index: any, type: string) {
    // TODO checkRegExp 为什么失效
    const regs = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
    const b = regs.test(value)
    if (!b) {
      common.XmMessage(1, '请填写两位小数以内的数字')
      // @ts-ignore：无法被执行的代码的错误
      props.tableDatas[index][type] = null
    }
  }

  function checkNumber(value: any, index: any) {
    const regs = /^([0-9]{1}|^[1-9]{1}\d{1,15})$/
    const b = regs.test(value)
    if (!b) {
      common.XmMessage(1, '请填写整数')
      // @ts-ignore：无法被执行的代码的错误
      props.tableDatas[index].num = null
    }
  }

  function checkRegExp(text: string, arg?: number, value?: number) {
    // 小数正则
    const decimal = arg ? `(\\.\\d{0,${arg})?` : ''
    // 整数正则
    const integer = value ? `(0|[1-9]\\d{0, ${value - 1}})` : '\\d*'
    const regExp = new RegExp(integer + decimal, 'g')
    return !regExp.test(text)
  }
</script>
<style lang="scss" scoped>
  .medicina-err-cell {
    :deep(.el-input__wrapper) {
      border-width: 0.5px;
      border: 1px solid #ff6464 !important;
      &:hover {
        border: 1px solid #ff6464 !important;
        cursor: default;
      }
    }
  }
</style>
